<template>
  <div class="form-dialog-test">
    <h1 @click="showModal = !showModal">打开/关闭</h1>
    <pro-dialog-form
      :validatePassFunc="validatePassFunc"
      v-model:showModal="showModal"
      :options="options"
      :form="form"
      @formItemChange="formItemChange"
      :loading="loading"
    >
    </pro-dialog-form>
  </div>
</template>

<script lang="ts" setup name="formDialogTest">
const showModal = ref(true)
const options = [
  {
    grid: {
      cols: '2'
    },
    columnItemList: [
      {
        gridItem: {
          offset: 0,
          span: '1'
        },
        formItem: {
          formType: 'input',
          label: '名字',
          key: 'name',
          rule: {
            required: true,
            message: '请输入名字',
            trigger: ['input']
          },
          placeholder: '请输入名字',
          suffix: false
        }
      },
      {
        gridItem: {
          offset: 0,
          span: '1'
        },
        formItem: {
          suffix: false,
          formType: 'input',
          label: '电话号码',
          key: 'phone',
          rule: {
            required: true,
            message: '请输入电话号码',
            trigger: ['input']
          },
          placeholder: '请输入电话号码'
        }
      }
    ]
  }
]
const form = reactive({})
const loading = ref(false)
const validatePassFunc = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    showModal.value = false
  }, 2000)
}
const formItemChange = (...args) => {
  // console.log('formItemChange args', ...args)
}
</script>

<style lang="less" scoped></style>
